<!-- eslint-disable vue/attributes-order -->
<template>

  <el-main>
    <!--条件查询-->
    <el-form ref="searchForm" label-width="80px" :inline="true" size="small">
      <el-form-item>
        <el-input v-model="searchModel.departmentName" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
        <el-button type="success" icon="el-icon-plus" @click="openAddWindow">新增</el-button>
      </el-form-item>
    </el-form>
    <!--数据表格-->
    <!--
      data:表格数据
    -->
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      stripe
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <!--prop:填写数据属性名称-->
      <el-table-column prop="departmentName" label="部门名称" />
      <el-table-column prop="parentName" label="所属部门" />
      <el-table-column prop="phone" label="部门电话" />
      <el-table-column prop="address" label="部门地址" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit-outline"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-close"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <system-dialog
      :title="deptDialog.title"
      :visible="deptDialog.visible"
      :width="deptDialog.width"
      :height="deptDialog.height"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          ref="deptForm"
          :model="dept"
          :rules="rules"
          label-width="80px"
          :inline="true"
          size="small"
        >
          <el-form-item label="所属部门" prop="parentName">
            <el-input
              v-model="dept.parentName"
              :readonly="true"
              @click.native="selectDepartment()"
            />
          </el-form-item>
          <el-form-item label="部门名称" prop="departmentName">
            <el-input v-model="dept.departmentName" />
          </el-form-item>
          <el-form-item label="部门电话">
            <el-input v-model="dept.phone" />
          </el-form-item>
          <el-form-item label="部门地址">
            <el-input v-model="dept.address" />
          </el-form-item>
          <el-form-item label="序号">
            <el-input v-model="dept.orderNum" />
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>
    <system-dialog
      :title="parentDialog.title"
      :visible="parentDialog.visible"
      :width="parentDialog.width"
      :height="parentDialog.height"
      @onClose="parentOnClose"
      @onConfirm="parentOnConfirm"
    >
      <div slot="content">
        <el-tree
          ref="parentTree"
          :data="treeList"
          node-key="id"
          :props="defaultProps"
          :default-expand-all="true"
          :highlight-current="true"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <div class="customer-tree-node" slot-scope="{ node, data }">
            <span v-if="data.children.length === 0">
              <i class="el-icon-document" />
            </span>
            <span v-else @click="openBtn(data)">
              <svg-icon v-if="data.open" icon-class="add-s" />
              <svg-icon v-else icon-class="sub-s" />
            </span>
            <span style="margin-left: 5px">{{ node.label }}</span>
          </div>
        </el-tree>
      </div>
    </system-dialog>
  </el-main>
</template>

<script>
import SystemDialog from '@/components/system/SystemDialog.vue'
import departmentApi from '@/api/department'
export default {
  // eslint-disable-next-line vue/name-property-casing
  name: 'department',
  components: {
    SystemDialog
  },
  data() {
    return {
      // 部门窗口属性
      deptDialog: {
        title: '新增部门',
        visible: false,
        width: 560,
        height: 170
      },
      // 部门对象
      dept: {
        id: '',
        pid: '',
        parentName: '',
        departmentName: '',
        address: '',
        phone: '',
        orderNum: ''
      },
      parentDialog: {
        title: '选择所属部门',
        visible: false,
        width: 300,
        height: 400
      },
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'departmentName'
      },
      rules: {
        parentName: [{ required: true, trigger: 'change', message: '请选择所属部门' }],
        departmentName: [{ required: true, trigger: 'blur', message: '请输入部门名称' }]
      },
      searchModel: {
        departmentName: ''
      },
      tableData: [], // 表格数据列表
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  created() {
    this.search()
  },
  methods: {
    async search() {
      const res = await departmentApi.getDepartmentList(this.searchModel)
      if (res.success) {
        this.tableData = res.data
      }
    },
    onClose() {
      this.deptDialog.visible = false
    },
    onConfirm() {
      this.$refs.deptForm.validate( async (valid) => {
        if (valid) {
          let res = null;//后端返回的数据
          if(this.dept.id===''){//新增
            res =  await departmentApi.addDept(this.dept);
          }else{
            //发送修改请求
            res = await departmentApi.updateDept(this.dept);
          }
          if (res.success) {
            this.$message.success(res.message);
            this.search();
            this.deptDialog.visible = false;
          }else{
            this.$message.error(res.message);
          }
        }
      })
    },
    async selectDepartment() {
      this.parentDialog.visible = true
      this.parentDialog.title = '选择所属部门'
      const res = await departmentApi.getParentTreeList()
      if (res.success) {
        this.treeList = res.data
      }
    },
    openAddWindow() {
      this.$resetForm('',this.dept)
      this.deptDialog.title = '新增部门'
      this.deptDialog.visible = true
    },
    parentOnClose() {
      this.parentDialog.visible = false
    },
    parentOnConfirm() {
      this.parentDialog.visible = false
    },
    handleNodeClick(data) {
      this.dept.pid = data.id
      this.dept.parentName = data.departmentName
    },
    openBtn(data) {
      data.open = !data.open
      this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open
    },
    handleEdit(row) {
      this.$objCopy(row,this.dept)
      this.deptDialog.title='编辑部门'
      this.deptDialog.visible=true
    },
    async handleDelete(row) { 
      let result = await departmentApi.checkDepartment({ id: row.id });
      if (!result.success) {
        this.$message.warning(result.message);
      }else{
        let confirm =await this.$myconfirm("确定要删除该数据吗?");
        if (confirm) {
          let res = await departmentApi.deleteById({ id: row.id });
          if (res.success) {
            this.$message.success(res.message);
            this.search();
          }else{
            this.$message.error(res.message);
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree {
  .el-tree-node {
    position: relative;
    padding-left: 10px;
  }
  .el-tree-node__children {
    padding-left: 20px;
  }
  .el-tree-node :last-child:before {
    height: 40px;
  }
  .el-tree > .el-tree-node:before {
    border-left: none;
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node:before,
  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .tree :first-child .el-tree-node:before {
    border-left: none;
  }
  .el-tree-node:before {
    border-left: 1px dotted #d9d9d9;
    bottom: 0px;
    height: 100%;
    top: -25px;
    width: 1px;
  }
  .el-tree-node:after {
    border-top: 1px dotted #d9d9d9;
    height: 20px;
    top: 14px;
    width: 24px;
  }
  .el-tree-node__expand-icon.is-leaf {
    width: 8px;
  }
  .el-tree-node__content > .el-tree-node__expand-icon {
    display: none;
  }
  .el-tree-node__content {
    line-height: 30px;
    height: 30px;
    padding-left: 10px !important;
  }
}
::v-deep .el-tree > div {
  &::before {
    display: none;
  }
  &::after {
    display: none;
  }
}
</style>

